<template>
    <div>
        <el-container class="container-box">
            <el-main class="container-content">
                <el-tabs id="p20" type="border-card" v-model="activeName" @tab-change="tabChange">
                    <el-tab-pane v-for="(v, k) in TABSNAME" :lazy="true" :name="v.name" :label="v.name" :key="k">
                        <!-- <router-view v-for="(cv, ck) in v.component" :name="cv" :key="ck">
                        </router-view> -->
                    </el-tab-pane>
                    <router-view :myCourseIDs="myCourseIDs" @update-course-ids="updateCourseIDs">
                    </router-view>
                </el-tabs>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang='ts'>
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";

// tabs
const TABSNAME = {
    CLASS: { name: "我的课堂", component: ['courseBag', 'courseList'] },
    MATERIAL: { name: "团队资料", component: ['material'] },
    // DOWNLOAD: { name: "软件下载", component: ['default'] },
} as const
type TABSNAMEITEM = (typeof TABSNAME[keyof typeof TABSNAME])

const router = useRouter()
const route = useRoute()
const store = useStore(Storekey)
const getuser = computed(() => {
    return store.state.user
})
const teamId = computed(() => {
    return Number(getuser.value?.teamid)
})

const activeName = ref<TABSNAMEITEM['name']>(TABSNAME.CLASS.name)

onMounted(async () => {
    start()
    initMyCourseIds()
})
async function start() {
    const routeName = route.name as TABSNAMEITEM['name']
    if (Object.keys(TABSNAME).find(k => (TABSNAME[k as keyof typeof TABSNAME].name) === routeName)) {
        tabChange(routeName)
    }
}
// 跳转
function tabChange(name: TABSNAMEITEM['name'] = TABSNAME.CLASS.name) {
    activeName.value = name
    router.push({ name: name, replace: true });
}

// 
const myCourseIDs = ref<number[]>([])
const updateCourseIDs = (newCourseIDs: number[]) => {
    myCourseIDs.value = newCourseIDs;
    sessionStorage.setItem('myCourseIDs', JSON.stringify(newCourseIDs)); // 将新值保存到 sessionStorage
};
const initMyCourseIds = () => {
    const savedCourseIDs = sessionStorage.getItem('myCourseIDs');
    if (savedCourseIDs) {
        myCourseIDs.value = JSON.parse(savedCourseIDs);
    }
}

</script>

<style scoped>
.container-box {
    /* 是否固定表格列表 */
    min-height: calc(100vh - 64px - var(--container-margin));

    /* margin-top: 20px; */
    padding: var(--container-margin) 5% 0;
    margin: var(--container-margin) 0rem 0 0rem;
    /* 外边距 */
    --container-margin: 20px;
    --container-header-height: 23vh;
    --container-bg-color: #fff;
}

.container-header {
    width: 100%;
    padding: 0;

    box-shadow: var(--container-box-shadow);
}

.container-content {
    /* margin-top: var(--container-margin); */
    padding: 0;
    background: var(--container-bg-color);
    min-width: 70%;
}

.container-content .pager {
    margin: var(--container-margin);
    margin-right: 0;
    margin-bottom: 0;
    float: right;
}


</style>